<template>
	<view>
		<view class="d-flex h-100">
			<view class="bg-blue left">1</view>
			<view class="bg-white right d-flex a-center j-center">
				<view class="actions-bar d-flex j-sb flex-column">
					<view class="actions-btn d-flex a-center card">
						<view class="px-2 flex-1 d-flex a-center">
							<image src="" mode=""></image>
							<view class="pl-2">
								<view class="font-lg font-weight">刷脸登录</view>
								<view class="suttitle mt-1">对准摄像头进行人脸识别</view>
							</view>
						</view>
					</view>
					<view @click="loginRef.open()" class="actions-btn card d-flex a-center">
						<view class="px-2 flex-1 d-flex a-center">
							<image src="" mode=""></image>
							<view class="pl-2">
								<view class="font-lg font-weight">账号登录</view>
								<view class="suttitle mt-1">输入账号和密码登录</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="loginRef" type="top" @change="loginRefChange">
			<view class="loginShell">
				<view style="padding: 50rpx 70rpx">
					<view class="font-big">账号登录</view>
					<uni-forms class="mt-2" ref="formRef" :modelValue="formData" :rules="rules">
						<uni-forms-item :label-width="1" label="" name="username">
							<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
						</uni-forms-item>
						<uni-forms-item class="mt-1" :label-width="1" label="" name="password">
							<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
						</uni-forms-item>
					</uni-forms>

					<view class="d-flex mt-3">
						<view class="flex-1 px-1">
							<view class="rounded-max bg-secondary button font-md text-white" @click="loginRef.close()">取消</view>
						</view>
						<view class="flex-1 px-1">
							<view class="rounded-max bg-primary button font-md text-white" type="primary" @click="onsubmit">登录</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from '@/store/index.js';
import { onReady } from '@dcloudio/uni-app';
const store = useStore();
const loginRef = ref(null);
const formRef = ref(null)

const formData = ref({
	username: '',
	password: ''
});

const rules = ref({
	username: {
		rules: [
			{
				required: true,
				errorMessage: '请输入账号'
			},
			{
				minLength: 3,
				errorMessage: '账号长度最少 {minLength} 个字符'
			}
		]
	},
	password: {
		rules: [
			{
				required: true,
				errorMessage: '请输入密码'
			},
			{
				minLength: 6,
				maxLength: 20,
				errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
			}
		]
	}
});


const reload = () => {
	formData.value = {
		username: '',
		password: ''
	};
};

const onsubmit = async () => {
	uni.showLoading()
	formRef.value.validate().then((res) => {
			uni.hideLoading();
			
			uni.redirectTo({url: '/pages/home/home'})
			
	}).catch((err) => {
			uni.hideLoading();
			console.log('表单错误信息：', err);
	});
};

const loginRefChange = (e) => {
	
	if (!e.show) {
		setTimeout(function() {reload();}, 1000);
	}
};
</script>

<style scoped lang="scss">
.left {
	width: 30vw;
}
.right {
	width: 70vw;
	.actions-bar {
		width: 40vw;
		height: 250rpx;
		.actions-btn {
			height: 100rpx;
			background-color: #fff;
			image {
				width: 60rpx;
				height: 60rpx;

				background-color: #bbb;
			}

			.suttitle {
				font-size: 8rpx;
				color: #bbb;
			}
		}
	}
}

.loginShell {
	width: 360rpx;
	height: 260rpx;
	background-color: #fff;
	border-radius: 0.5vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 20%);
}
</style>
